<template>
  <div>
    <el-card shadow="never" class="border-0 titles">
      今日数据明细
    </el-card>
      <el-row :gutter="20" style="margin-left: 2%;">
        <el-col :span="6" v-for="obj in list_content[0]" :key="obj">
          <div :style="`
          background: red;
          width: 70%;
          height: 113px;
          display: flex;
          align-items: center;
          background: url('${obj.image}');
          background-repeat: no-repeat;
          background-position: left;
          background-size: 100%;
          border-radius: 9px;
          `" >
            <el-statistic :title="obj.title">
              <template slot="formatter">
                {{obj.number}}
              </template>
            </el-statistic>
          </div>
        </el-col>


      </el-row>
    <el-card shadow="never" class="border-0 titles">
      数据总明细
    </el-card>
    <el-row :gutter="20" style="margin-left: 2%;" >
      <el-col :span="6" v-for="obj in list_content[1]" :key="obj">
        <div :style="`
          background: red;
          width: 70%;
          height: 113px;
          display: flex;
          align-items: center;
          background: url('${obj.image}');
          background-repeat: no-repeat;
          background-position: left;
          background-size: 100%;
           border-radius: 9px;
          `" >
          <el-statistic :title="obj.title">
            <template slot="formatter">
              {{obj.number}}
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>

    <el-card shadow="never" class="border-0 titles">
      当月用户人数增加统计
    </el-card>
    <div id="main" style="width: 100%;height:400px;"></div>
    <el-card shadow="never" class="border-0 titles">
      当月每日充值统计
    </el-card>
    <div id="main1" style="width: 100%;height:400px;"></div>
    </div>
</template>

<script>
import {selectCount} from "@/api/system/user";

import * as echarts from 'echarts';

export default {
  name: "Index",
  data() {
    return {
      version: "3.8.9",
      like: true,
      newUserToday:0,  //今日新增用户
      totalPlatformUsers:0, // 平台总用户
      topUpToday:0, // 今日充值
      withdrawalToday:0, // 今日提现
      totalTopUp:0, // 总充值
      totalWithdrawal:0, // 总提现
      totalSubscriberBalance:0, // 用户总余额
      userDayTuList:[],//查询当月每天的新增用户
      chongZhiDayTuList:[],//查询当月每天的新增充值
      images:['https://privatedomainapi.siyu99.com/LiKLKImages/广告1.png','https://privatedomainapi.siyu99.com/LiKLKImages/广告2.png', 'https://privatedomainapi.siyu99.com/LiKLKImages/广告3.png'],
      list_content:[
        [
          {
          "title":'今日新增用户',
          "number":'',
          "image":'https://privatedomainapi.siyu99.com/LiKLKImages/首页1.jpg',
          },
          {
            "title":'今日充值',
            "number":'',
            "image":'https://privatedomainapi.siyu99.com/LiKLKImages/首页2.jpg',
          },
          {
            "title":'今日提现',
            "number":'',
            "image":'https://privatedomainapi.siyu99.com/LiKLKImages/首页3.jpg',
          },
        ],
        [
          {
            "title":'平台总用户',
            "number":'',
            "image":'https://privatedomainapi.siyu99.com/LiKLKImages/首页4.jpg',
          },
          {
            "title":'总充值',
            "number":'',
            "image":'https://privatedomainapi.siyu99.com/LiKLKImages/首页5.jpg',
          },
          {
            "title":'总提现',
            "number":'',
            "image":'https://privatedomainapi.siyu99.com/LiKLKImages/首页6.jpg',
          },
          {
            "title":'用户总余额',
            "number":'',
            "image":'https://privatedomainapi.siyu99.com/LiKLKImages/首页7.jpg',
          },
        ]


      ]
    };
  },

  comounted() {
      // this.getList();
  },


//计算属性ow属性
    computed: {
       daysInMonth(){
        return new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
       },
      daysArray(){
        return Array.from({ length: this.daysInMonth }, (_, index) => index + 1);
      },

      daysArray2(){
        return Array.from({ length: this.daysInMonth }, (_, index) => index + 1);
      }
    },

  created() {

  },
  async mounted(){
    //调用api接口
    selectCount().then((res)=>{
      console.log(666)
      console.log(res)
      console.log(res.dayusersTu[0])
      this.list_content[0][0].number = res.dayusers==null?0:res.dayusers;//今日新增用户
      this.list_content[0][1].number = res.daychongzhi==null?0:res.daychongzhi;// 今日充值
      this.list_content[0][2].number = res.dayTx==null?0:res.dayTx;// 今日提现
      this.list_content[1][0].number = res.users==null?0:res.users;//总用户
      this.list_content[1][1].number = res.zchongz==null?0:res.zchongz; // 总充值
      this.list_content[1][2].number = res.zTx==null?0:res.zTx;// 总提现
      this.list_content[1][3].number = res.balances==null?0:res.balances;// 用户总余额
      this.userDayTuList = res.dayusersTu
      this.chongZhiDayTuList = res.dayChongzhisTu
      //图片内容
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));//用户
      var myChart1 = echarts.init(document.getElementById('main1'));//充值
      this.value1 = this.userDayTuList.map(item => item.date.substring(8));
      this.value2 = this.userDayTuList.map(item => item.new_users);
      this.value3 = this.chongZhiDayTuList.map(item => item.date.substring(8));
      this.value4 = this.chongZhiDayTuList.map(item => item.total_fund);

      console.log("value1:", this.value1); // 验证日期数组
      console.log("value2:", this.value2); // 验证数值数组

    /*
      this.value1= this.daysArray
      this.value2= this.daysArray2.reverse()*/
      // 用户
      var option = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            return `天数:${params[0].axisValue} <br/>人数:${params[0].value}`;  // 保留两位小数‌:ml-citation{ref="8" data="citationList"}
          }
        },
        xAxis: {
          type: 'category',
          name:'日',
          data: this.value1
        },
        yAxis: {
          type: 'value',
          name:'人数/个',
        },
        series: [
          {
            data: this.value2,
            type: 'bar',
            smooth: true
          }
        ]
      };
//充值
      var option1 = {
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            return `天数:${params[0].axisValue} <br/>RMB:${params[0].value}`;  // 保留两位小数‌:ml-citation{ref="8" data="citationList"}
          }
        },
        xAxis: {
          type: 'category',
          name:'日',
          data: this.value3
        },
        yAxis: {
          type: 'value',
          name:'RMB/元',
        },
        series: [
          {
            data: this.value4,
            type: 'line',
            smooth: true
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart1.setOption(option1);
    })

  },

  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};

</script>

<style scoped lang="scss">
.titles{
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin:3% 0%;
  border: none;
  padding-left: 18px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.hezi{
  background: linear-gradient(to right, #e0f2f1, #b3e5e4, #a8dadc);;
  padding-top: 2%;
  padding-bottom: 2%;
  margin-right: 2%;
}
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
.lbt{
  width: 100%;
  height: 395px;
  border-radius: 9px;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%;
}
.list_tu{
  width: 100%;
  height: 488px;
  background: red;
  border-radius: 9px;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%;
}
.tow_list{
  background: red;
  width: 70%;
  height: 150px;
  display: flex;
  align-items: center;
  background: url("https://privatedomainapi.siyu99.com/LiKLKImages/广告2.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%;
}

</style>

